<template>
  <div class="school-info">
    <div class="school-content">
      <div class="school-details">
        <h2 class="school-name">{{ schoolName.value || props.schoolName }}</h2>
        <div class="group-badge" v-if="group">{{ group }}</div>
      </div>
    </div>
    <div class="score-container">
      <div class="score-badge" :class="{ 'highlight': isHighlighted }">
        {{ score !== undefined ? score : '-' }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

import { ref, watch } from 'vue';
import axios from 'axios';

const props = defineProps({
  schoolId: {
    type: String,
    required: false,
    default: ''
  },
  schoolName: {
    type: String,
    default: ''
  },
  logoSrc: {
    type: String,
    required: true
  },
  altText: {
    type: String,
    required: true
  },
  score: {
    type: Number,
    default: undefined
  },
  isHighlighted: {
    type: Boolean,
    default: false
  },
  group: {
    type: String,
    default: ''
  }
});

const schoolName = ref(props.schoolName || '');
const isLoading = ref(false);

watch(() => props.schoolId, async (newId) => {
  if (newId && !props.schoolName) {
    isLoading.value = true;
    try {
      const response = await axios.get(`/api/schools/${newId}`);
      schoolName.value = response.data.name;
    } catch (error) {
      console.error('获取学校信息失败:', error);
    } finally {
      isLoading.value = false;
    }
  }
}, { immediate: true });
</script>

<style scoped>
.school-info {
  text-align: center;
  flex: 1;
  padding: 20px;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.school-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.school-info:hover {
  transform: translateY(-5px);
}

.school-name {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  display: inline-block;
  padding: 10px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.score-container {
  display: flex;
  justify-content: center;
}

.score-badge {
  font-size: 48px;
  font-weight: bold;
  padding: 10px 25px;
  border-radius: 12px;
  background: white;
  color: #409EFF;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  transition: all 0.3s ease;
  min-width: 100px;
  text-align: center;
}

.score-badge.highlight {
  background: #409EFF;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
}

.score-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(64, 158, 255, 0.3);
}

.score-badge.highlight:hover {
  transform: scale(1.15);
}

.school-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.group-badge {
  background: #f0f0f0;
  color: #666;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
</style>